<template>
    <div>
        <ul>
            <li v-for="(item,index) in emojiList" :key="index" @click="handleEmoji(item)">
                <div class="emoji-item">{{ item }}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import emoji from './emoji'
export default {
    data() {
        return {
            emojiList: emoji
        }
    },
    methods: {
        handleEmoji(item) {
            this.$emit('emoji', item)
        }
    }
}
</script>

<style lang="less" scoped>
ul {
    width: 100%;
    padding: .4rem 0 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    li {
        width: 14.28%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.emoji-item {
    width: .7333rem;
    height: .7333rem;
    margin-bottom: .4rem;
    font-size: .6667rem;
}
</style>